<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        
        <el-button size="small" class="filter-item" type="primary" icon="el-icon-circle-plus-outline" @click="insertDeveUsers">新增人员（系统建设单位）</el-button>
        <el-button size="small" class="filter-item" type="primary" icon="el-icon-circle-plus-outline" @click="insertAllUsers">新增人员（所有人员）</el-button>
        <el-button size="small" class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>

        
        
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div>
          <div class="treeArea" style=" margin-top: 20px">
            <el-table
              :data="userData"
              size="small"
              style="width: 100%;border:#eeeeee">
            <el-table-column
              align="center"
              type="index"
              width="80"
              label="编号"
            >
            </el-table-column>
              <el-table-column
                prop="name"
                label="用户名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="nameEn"
                label="用户名称英文">
              </el-table-column>
              <el-table-column
                prop="code"
                label="用户编码">
              </el-table-column>
              <el-table-column
                prop="org_name"
                label="用户所属机构">
              </el-table-column>
              </el-table-column>
              <el-table-column
                prop="developmentUnitName"
                label="系统建设单位">
              </el-table-column>
              <el-table-column
                prop="systemName"
                label="系统名称">
              </el-table-column>
              
              <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                 
                  <el-button @click="deleteUser(scope.row)" type="text" size="small">删除</el-button>
                 
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="listQuery.page" :page-sizes="[10,20,30, 50]"
                           :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </div>
          <el-row :gutter="5">
            <el-col style="text-align: center; border-top:1px solid #e6e6e6; padding-top:20px; margin-top:10px;">
              <!--<el-button class="filter-item" type="primary" @click="saveData">确 定</el-button>-->
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
    
    <el-dialog
      title="未设置人员"
      :visible.sync="dialogVisible"
      top="5vh"
      width="80%" @closed='closeUserAddDialog2'>
      <el-row>
        <el-col :span="8">
          <el-tree ref='tree'
                   :data="treeData"
                   v-loading="loading"
                   style="height: 400px; overflow: scroll"
                   :props="defaultProps"
                   :expand-on-click-node='false'
                   @node-click="handleNodeClick"
                   node-key="id"
                   :highlight-current='true'
                   :default-expand-all='true'></el-tree>
        </el-col>
        <el-col :span="16">
          <el-table
            :data="userDataDemo"
            size="small"
            style="width: 100%;height: 330px; overflow: auto;border:#eeeeee">
            <el-table-column
              prop="loginName"
              label="登录名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="用户名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="nameEn"
              label="用户名称英文">
            </el-table-column>
            <el-table-column
              prop="orgId"
              label="用户机构ID">
            </el-table-column>
            <el-table-column
              prop="code"
              label="用户编码">
            </el-table-column>
            <el-table-column
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="insertUser(scope.row)" type="text" size="small">插入</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChangeDemo"
                           @current-change="handleCurrentChangeDemo"
                           :page-sizes="[10,20,30, 50]"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="totalDemo">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>

<script>


import {
  
  treeByParentId,
  treeById
 
} from '@/api/bussSystemManage/orgTreeExt'

import {
  systemManagerSelect,
  systemManagerInsert,
  systemManagerDelete,
  getNoSelectedManagers
} from '@/api/bussSystemManage/systemManagerMgr'
export default {
  name: 'editSystemManagers',
  components: {},
  data() {
    return {
      total: 0,
      treeData: [],
      loading: false,
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      oldMenuIdArr: [],
      listQuery: {
        rowBounds: {
          offset: 0,
          limit: 10
        },
        condition: [],
        fields: [
        ],
        sort: [{
          direction: 'ASC',
          property: 'userId'
        }]
      },
      listQueryDemo: {
        rowBounds: {
          offset: 0,
          limit: 10
        },
        condition: [            
        {
          'property': 'orgId',
          'value': '',
          'type': 'EQ'
        }],
        fields: [
        ],
        sort: [{
          direction: 'ASC',
          property: 'orderNo'
        }]
      },
      totalDemo: 0,
      form: '',
      userData: [],
      userDataDemo: []
    }
  },
  created() {
    this.getUsersOfSystem()
  },
  methods: {
    
    // 翻页器使用
    handleSizeChange(val) {
      this.listQuerypage = 1
      this.listQuery.rowBounds.offset = 0
      this.listQuery.rowBounds.limit = val
      this.getUsersOfSystem()
    },
    // 翻页器使用
    handleCurrentChange(val) {
      this.listQuerypage = val
      this.listQuery.rowBounds.offset =
        this.listQuery.rowBounds.limit * (val - 1)
      this.getUsersOfSystem()
    },
    
    getUsersOfSystem() {
      this.loading = true
      this.listQuery.condition = []
      this.listQuery.condition.push(
        {
          'property': 'systemId',
          'value': this.$route.params.systemId,
          'type': 'EQ'
        }
      )
       systemManagerSelect(this.listQuery).then(res => {
        this.userData = res.data.data.records
        this.total = res.data.data.count
        this.loading = false
      }).catch((err) => {
        console.log(err)
      }) 
      
    },
    // 翻页器使用
    handleSizeChangeDemo(val) {
      this.listQueryDemo.rowBounds.offset = 0
      this.listQueryDemo.rowBounds.limit = val
      getNoSelectedManagers(this.listQueryDemo).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })
    },
    // 翻页器使用
    handleCurrentChangeDemo(val) {
      this.listQueryDemo.rowBounds.offset =
        this.listQueryDemo.rowBounds.limit * (val - 1)
      
      getNoSelectedManagers(this.listQueryDemo).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })
    },
    insertUser(row) {
      var rowDemo = 
        {
          userId: row.id,
          systemId: this.$route.params.systemId,
          
        }
       
     systemManagerInsert(rowDemo).then(res => {
      //  this.userDataDemo.splice(this.userDataDemo.indexOf(row), 1)
      getNoSelectedManagers(this.listQueryDemo).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })
        
        this.getUsersOfSystem()
        this.$message({
          message: '插入成功',
          type: 'success'
        })
      }).catch((err) => {
        console.log(err)
      })
      
      
    },
    
    closeSelf() {
      this.$router.push({ name: 'subSys' })
    },
    insertDeveUsers() {
      
      
      this.dialogVisible = true
      treeById({ id: this.$route.params.orgId,status: "0"}).then(response => {
        this.treeData = response.data.data
      })
    },
    handleNodeClick(data) {
      
      this.listQueryDemo.condition[0].value = data.id
      this.listQueryDemo.systemId = this.$route.params.systemId
      
      getNoSelectedManagers(this.listQueryDemo).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })
      
      /*
      this.$store.dispatch('getNoSelectedUsers', this.listQueryDemo).then(res => {
        this.userDataDemo = res.data.records
        this.totalDemo = res.data.count
        this.loading = false
      }).catch((err) => {
        console.log(err)
      }) 
      */
    },
    deleteUser(row) {
      var rowDemo = 
        {
          
          id: row.id
        }

      systemManagerDelete(rowDemo).then(res => {
      
        
        this.getUsersOfSystem()
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }).catch((err) => {
        console.log(err)
      })
      
      
      
    },
    insertAllUsers() {
      this.dialogVisible = true
      treeByParentId({ parentId: "****",status: "0" }).then(response => {
        this.treeData = response.data.data
      })
    },
    closeUserAddDialog2(){
      this.userDataDemo = []
        this.totalDemo = 0
    }
   
  }
}
</script>

<style scoped>
.treeArea {
    max-height: 66vh;
    overflow-y: auto;
}
</style>
